<template>
  <div>
    <div id="centreRight2Chart3" ></div>
  </div>
</template>

<script>

   import Moment from 'moment'
export default {

  data() {
    return {
      chart: null,
      company_id:'7897cc86-0603-4cc3-9bd6-1e405ad0ac77',
      startTime:null,
      endTime:null,
      startPower:null,
      endPower:null,
      name:null,
      minutes:null,
    };
  },
  mounted() {
    this.draw()
    this.getData()
  },
  created() {
    //两分钟刷新一次这个方法
    this.timer = setInterval(() =>{
      this.getData()
    },120000)
  },
  // 可以判断如果定时器还在运行就关闭 或者直接关闭
  destroyed () {
    clearInterval(this.timer)
  },
  props: {
    selectProp: {
      type: String,
      required: true
    }
  },
  watch:{
    minutes:{
      handler(n){
        console.log('m',n)
      },
    }
  },
  methods: {
    get1(){
      alert('aaaa')
    },
    //岸电
    getData(){
      this.axios.get('http://36.156.158.102:8085/cqdata/cqdata/queryChargingRecord').then((response)=>{
         this.startTime = response.data.data.startTime
         this.endTime = response.data.data.endTime
         this.startPower = response.data.data.startPower
         this.endPower = response.data.data.endPower

        if (response.data.data.endTime!==null){
          this.name ="充电时长"
        }else {
          this.name ="正在充电"
        }
        console.log('嗷嗷',response.data)
        //获取两个时间的分钟数
        this.minutes = Moment(response.data.data.endTime).diff(Moment(response.data.data.startTime),'minutes' )

        this.draw()
      })
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreRight2Chart3"));
      //  ----------------------------------------------------------------
      // var value = 50;
      var name = this.name
      var value = this.minutes
      // console.log('value1',value)
      var color = new this.$echarts.graphic.LinearGradient(
              0, 0, 1, 0, [{
                offset: 0,
                color: "#41D7F3",
              },
                {
                  offset: 1,
                  color: "#3D9FFF",
                }
              ]
      );
      var option = {
        title: {
          text: name,
          bottom: '14%',
          left: '32%',
          textStyle: {
            fontSize: 18,
            color: 'rgba(38,255,251,0.8)'
          }
        },
        series: [{
          type: 'gauge',
          startAngle: 225,
          endAngle: -45,
          min: 0,
          max: 2880,
          radius: '90%', //外圈大小
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [1, '#999']
              ],
              width: 1,
              opacity: 1
            }
          },
          title: {
            show: false
          },
          detail: {
            show: true,
            offsetCenter: [0, '70%'],
            formatter: function(value) {
              return '{value|' + value + '}{unit|分钟}\n\n{line|}';
            },
            rich: {
              value: {
                fontSize: 18,//百分比字体大小
                fontWeight: 500,
                color: '#239CFB',
                padding: [0, 0, 30, 2]
              },
              unit: {
                fontSize: 14,
                color: '#239CFB',
                padding: [0, 0, 32, 2]
              },

            }
          },
          axisTick: {
            length: 0,
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            show: false,

          },
          axisLabel: {
            show: false,
            color: '#999'
          },
          pointer: {
            // show:false,
            width: 10,
            length: 28
          },
          itemStyle: {
            color: color,
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          markPoint: {
            data: [{
              x: "50%",
              y: "50%",
              symbol: 'circle',
              symbolSize: 5,
              itemStyle: {
                color: color
              },
            }, {
              x: "50%",
              y: "50%",
              symbol: 'circle',
              symbolSize: 5,
              itemStyle: {
                color: "#fff"
              },
            }]
          },
          data: [{
            value: value,
          }]

        },
          {
            name: "充电时长",
            type: 'gauge',
            radius: '90%', //内圈大小
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: 100,
            title: {
              show: false
            },
            detail: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 16,
                color: [
                  [
                    value / 100, color
                  ],
                  [
                    1, 'rgba(225,225,225,0.4)'
                  ]
                ],
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: '#54F200',
              }
            },
          }
        ]

      }

      this.chart.setOption(option);
    }
  },

};
</script>

<style lang="scss" scoped>
#centreRight2Chart3{
  width: 100%;
  height: 280px;
  /*margin-left: 20%;*/
}
</style>
